<template>
  <div class="shopTag">
    <div class="am-g bgf7 cakepage-big">
        <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img width="100%" height="380px" src='https://res.bestcake.com/m-images/jd-detail/兔小萌/%E5%85%94%E5%B0%8F%E8%90%8C-1.jpg?v=20170607' />
        </van-swipe-item>
        <van-swipe-item>
          <img width="100%" height="380px" src='https://res.bestcake.com/m-images/jd-detail/兔小萌/%E5%85%94%E5%B0%8F%E8%90%8C-2.jpg?v=20170607' />
        </van-swipe-item>
        <van-swipe-item>
          <img width="100%" height="380px" src='https://res.bestcake.com/m-images/jd-detail/兔小萌/%E5%85%94%E5%B0%8F%E8%90%8C-3.jpg?v=20170607' />
        </van-swipe-item>
        <van-swipe-item>
          <img width="100%" height="380px" src='https://res.bestcake.com/m-images/jd-detail/兔小萌/%E5%85%94%E5%B0%8F%E8%90%8C-4.jpg?v=20170607' />
        </van-swipe-item>
        </van-swipe>
        <router-link to="/goodsclassify"><div class="fanhui"
        style="width:20vw;height:7vw;position:fixed;background:rgba(255,255,255,.5);border-radius:10px;
        border:1px solid #000;font-size:3.5vw;text-align:center;line-height:7vw;right:0;top:30px">
        更多商品
        </div></router-link>

        <!--蛋糕图片和名称1-->
        <div class="am-u-sm-12 clplr bgw mt4"
        style="box-sizing:border-box;border-bottom:3px solid #ccc"
        >
          <div class="cake-info-datum">
            <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-a" >
              <div class="cake-info-left qfc"><font color='gray'>甜度</font><img
                  src="https://res.bestcake.com/m-images/ww/jz/tiandu_3.png"
                class="am-img-responsive" style="width:35vw;height:3vw; position:relative;top:-5vw;left:10vw;margin-left:8vw"/></div>
              <div class="cake-info-right hfc">
                <img alt style="vertical-align: top; width: 22.4vw; margin-top: 0.6vw;" />
              </div>
            </div>
            <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-b" style="height:19px">
              <div class="cake-info-left qfc" style="width:100%"><font color='gray'>口味</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 醇香奶油</div>
            </div>
            <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-c" style="height:19px">
              <div class="cake-info-left qfc" style="width:100%"><font color='gray'>原材料</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安佳淡奶油，白巧克力，黑巧克力，甜菜根粉</div>
            </div>
            <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-d" style="height:19px">
              <div class="cake-info-left qfc" style="width:100%"><font color='gray'>适合人群</font> &nbsp;&nbsp;所有人群</div>
            </div>
            <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-e" style="height:19px">
              <div class="cake-info-left qfc" style="width:100%;"><font color='gray'>保鲜条件</font> &nbsp;&nbsp;最适宜0℃~8℃冷藏保存，离开冷藏请勿超过2小时</div>
            </div>
          </div>
        </div>
        <!-- 商品评价 -->
          <div class="am-u-sm-6 clplr evaluate-a">
            <div class="left">
              <img
                src="https://res.bestcake.com/m-images/ww/detail/evaluate-a.png"
                class="am-img-responsive"/>
            </div>
            <div class="right" style="margin-left:20px; line-height:50px">商品评价</div>
          </div>
          <div class="am-u-sm-6 clplr evaluate-b" align="right" style="height:50px;line-height:50px;float:right;background-color:white">
            <div class="right" >
              <img
                src="https://res.bestcake.com/m-images/ww/detail/evaluate-b.png"
                style="margin-right:5vw"/>
            </div>
            <div class="left qfc" style="float:left;position:relative;left:135px">(条)</div>
          </div>
        <!-- 商品磅数 -->
        <div class="am-u-sm-12 clplr bgw mt4">
          <div class="am-u-sm-12 clplr cake-size-b">
              <div class="left" style="width:50%;height:38px;float:left">
                <img
                  src="https://res.bestcake.com/m-images/ww/detail/icon-custom-1.png"
                  style="height:24px;width:24px;margin-left:15px"
                />
                <span style="font-size:3.5vw">  13.5*13.5cm</span>
              </div>
              <div class="left" style="width:50%;height:38px;float:left">
                <img
                  src="https://res.bestcake.com/m-images/ww/detail/icon-custom-2.png"
                  style="height:24px;width:24px;margin-left:15px"
                />
                <span style="font-size:3.5vw">  适合4-5人分享</span>
              </div>
              <div class="left" style="width:50%;height:38px;float:left">
                <img
                  src="https://res.bestcake.com/m-images/ww/detail/icon-custom-3.png"
                  style="height:24px;width:24px;margin-left:15px"
                />
                <span style="font-size:3.5vw">  含五人份餐具</span>
              </div>
              <div class="left" style="width:50%;height:38px;float:left">
                <img
                  src="https://res.bestcake.com/m-images/ww/detail/icon-custom-4.png"
                  style="height:24px;width:24px;margin-left:15px"
                />
                <span style="font-size:3.5vw">  至少需提前一天预约</span>
              </div>
              <div class="right"></div>
          </div>
        </div>
        <!-- 商品购买数量 -->
        <div class="am-u-sm-12 clplr bgw mt4 p4">
          <div class="am-u-sm-6 clplr amount-a" >
            <div>购买数量</div>
          </div>
          <div style="float:right;position:relative;bottom:6vw;margin-right:6vw"><van-stepper
  v-model="value"
  input-width="10vw"
  button-size="6vw"
/></div>
        </div>
        <div class="am-u-sm-12 clplr mt4 p4 jg-gonggao">
          <div class="jg-gonggao1" style="margin-bottom:10px;width:450px" >
            <div class="jg-text-z">划线价格</div>
            <div class="jg-text-y">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
          </div>
          <div class="jg-gonggao1" style="width:450px">
            <div class="jg-text-z">未划线价格</div>
            <div class="jg-text-y">
              商品的实时标价，不因表述的差异改变性质。
              具体成交价格根据商品参加活动，或会员使用优惠券、
              积分等发生变化，最终以订单结算页价格为准。</div>
          </div>
        </div>
      </div>
      <!-- 底部界面 -->
      <van-submit-bar
  :price="218*100"
  button-text="提交订单"
  @submit="onSubmit"
>
<template slot='default'>
  <div class="btn">加入购物车</div>
  </template>
</van-submit-bar>
    </div>
</template>

<script>
export default {
  data: () => ({
    value: 1
  }),
  created() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.shopTag{
  overflow: hidden;
  margin-bottom: 50px;
  padding-right: 3vw;
  .jg-text-z{
    width: 30vw;
  }
  .jg-text-y{
    width: 65vw;
  }
  .btn{
    margin-left: 10px;
    line-height: 50px;
    border:none;
    width: 25%;
    height: 100%;
    cursor: pointer;
  }
}
.clplr {
  padding-left: 0;
  padding-right: 0;
}
.bgw {
  background: white;
}
.swiper-wrapper {
  height: 421px;
}
.swiper-slide {
  float: left;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.pagination {
  z-index: 88;
  position: absolute;
  right: 4vw;
  bottom: 4vw;
  .pagination div {
    float: left;
    margin-left: 1.6vw;
  }

  .pagination div a {
    display: block;
    background: #999;
    width: 1.6vw;
    height: 1.6vw;
    border-radius: 1px;
  }

  .pagination .swiper-pagination-active a {
    background: #f2495e;
  }

  .srr-img {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .swiper-wrapper {
    height: 421px;
  }

  .pnav {
    margin-top: 30px;
    text-align: center;
    line-height: 24px;
    font-size: 16px;
  }

  .pnav a {
    padding: 4px;
  }

  .pnav a.cur {
    background: #007bc4;
    color: #fff;
  }

  .demo {
    width: 80%;
    margin: 10px auto;
  }
}
    .clplr {
        padding-left: 0;
        padding-right: 0;
    }

    .selecting {
        pointer-events: none;
    }
    .promotion-activity {
            width: 100%;
            height: 8vw;
            text-align: center;
            margin-bottom: 8vw;
        }

        .promotion-activity-1 {
            display: inline-block;
            margin: 0 auto;
        }

        .promotion-activity .promotion-a {
            float: left;
            margin-right: 2vw;
            font-size: 4vw;
            line-height: 8vw;
            width: 8vw;
            height: 8vw;
            text-align: center;
            color: #fff;
            border-radius: 2px;
            background: #f2495e;
            margin-right: 1.33vw;
        }
        .clplr {
        padding-left: 0;
        padding-right: 0;
    }

    .selecting {
        pointer-events: none;
    }
     .bgw {
            background: white;
        }

     .mt4 {
            margin-top: 4vw;
        }
     .cake-info-datum-list {
            clear: both;
        }

            .cake-info-datum-list .cake-info-left {
                font-size: 3.73vw;
                float: left;
                width: 15.93vw;
                margin-left: 4vw;
            }

            .cake-info-datum-list .cake-info-right {
                font-size: 3.73vw;
                float: left;
                width: 72vw;
                margin-left: 4vw;
                margin-right: 4vw;
            }

        .cake-info-datum-a {
            margin-bottom: 2.93vw;
            margin-top: 9.066vw;
        }

        .cake-info-datum-b {
            margin-bottom: 4vw;
        }

        .cake-info-datum-c {
            margin-bottom: 4vw;
        }

        .cake-info-datum-d {
            margin-bottom: 4vw;
        }

        .cake-info-datum-e {
            margin-bottom: 9.066vw;
        }
         .cake-info-datum-list .cake-info-right {
                font-size: 3.73vw;
                float: left;
                width: 72vw;
                margin-left: 4vw;
                margin-right: 4vw;
            }

         .hfc {
            color: #252525;
        }
         .cake-info-datum-a {
            margin-bottom: 2.93vw;
            margin-top: 9.066vw;
        }

        .cake-info-datum-b {
            margin-bottom: 4vw;
        }

        .cake-info-datum-c {
            margin-bottom: 4vw;
        }

        .cake-info-datum-d {
            margin-bottom: 4vw;
        }

        .cake-info-datum-e {
            margin-bottom: 9.066vw;
        }
         .cake-info-datum-list {
            clear: both;
        }

            .cake-info-datum-list .cake-info-left {
                font-size: 3.73vw;
                float: left;
                width: 15.93vw;
                margin-left: 4vw;
            }

            .cake-info-datum-list .cake-info-right {
                font-size: 3.73vw;
                float: left;
                width: 72vw;
                margin-left: 4vw;
                margin-right: 4vw;
            }

        .cake-info-datum-a {
            margin-bottom: 2.93vw;
            margin-top: 9.066vw;
        }

        .cake-info-datum-b {
            margin-bottom: 4vw;
        }

        .cake-info-datum-c {
            margin-bottom: 4vw;
        }

        .cake-info-datum-d {
            margin-bottom: 4vw;
        }

        .cake-info-datum-e {
            margin-bottom: 9.066vw;
        }

      .am-u-sm-12{
        width:100%
      }

        .mt4 {
            margin-top: 4vw;
        }
       .p4 {
            padding: 4vw;
        }
         .am-u-sm-6.clplr.evaluate-a {
            padding-left: 4vw;
        }

        .evaluate-a .left {
            float: left;
            font-size: 3.73vw;
            margin-top: 1.2vw;
            margin-right: 2.93vw;
            width: 12%;
        }

        .evaluate-a .right {
            float: left;
            font-size: 3.73vw;
        }

        .am-u-sm-6.clplr.evaluate-b {
            padding-right: 4vw;
        }

        .evaluate-b .left {
            float: right;
            font-size: 3.73vw;
        }

        .evaluate-b .right {
            float: right;
            font-size: 3.73vw;
            margin-top: 1.3vw;
            margin-left: 1.6vw;
            width: 5%;
        }
         .cake-size-a {
            margin-top: 8vw;
        }

        .cake-size-b {
            margin-top: 11.33vw;
        }

        .marketing-list {
            margin-top: 4vw;
        }

            .marketing-list:first-child {
                margin-top: 4vw;
            }

            .marketing-list .marketing-a {
                float: left;
                padding: 7.467vw 4vw;
                width: 12.39vw;
                padding-top: 2vw;
            }

            .marketing-list .marketing-b {
                float: left;
                width: 60%;
            }

            .marketing-list .marketing-c {
                float: right;
                margin-right: 4vw;
                width: 19.325vw;
            }

            .marketing-list .marketing-b .marketing-b-1 {
                font-size: 3.73vw;
                color: #f2495e;
            }

            .marketing-list .marketing-b .marketing-b-2 {
                font-size: 3.73vw;
                color: #333;
            }

        .cake-size-a .li-select {
            float: left;
            font-size: 3.73vw;
            text-align: center;
            line-height: 8vw;
            padding: 0 3.5875vw;
            height: 8vw;
            margin-left: 4vw;
            background: #fff;
            border-radius: 2px;
            color: #333;
            border: 1px solid #ddd;
            margin-bottom: 1rem;
        }

        .cake-size-a .li-selected {
            background: #02d3d6;
            border-radius: 2px;
            color: #fff;
            border: 1px solid #02d3d6;
        }
          .cake-size-b {
            margin-top: 11.33vw;
        }

    .clplr {
        padding-left: 0;
        padding-right: 0;
    }
     .doc-icon-custom-1 {
            margin-bottom: 4vw;
        }

        .doc-icon-custom-2 {
            margin-bottom: 4vw;
        }

        .doc-icon-custom-3 {
            margin-bottom: 8vw;
        }

        .doc-icon-custom-4 {
            margin-bottom: 8vw;
        }

        .doc-icon-custom-1 .left {
            float: left;
            width: 12%;
            margin-right: 2.66vw;
            margin-left: 4vw;
        }

        .doc-icon-custom-1 .right {
            float: left;
            line-height: 6.5vw;
            font-size: 3.73vw;
        }

        .doc-icon-custom-2 .left {
            float: left;
            width: 12%;
            margin-right: 2.66vw;
        }

        .doc-icon-custom-2 .right {
            float: left;
            line-height: 6.5vw;
            font-size: 3.73vw;
        }

        .doc-icon-custom-3 .left {
            float: left;
            width: 12%;
            margin-right: 2.66vw;
            margin-left: 4vw;
        }

        .doc-icon-custom-3 .right {
            float: left;
            line-height: 6.5vw;
            font-size: 3.73vw;
        }

        .doc-icon-custom-4 .left {
            float: left;
            width: 12%;
            margin-right: 2.66vw;
        }

        .doc-icon-custom-4 .right {
            float: left;
            line-height: 6.5vw;
            font-size: 3.73vw;
        }
       .p84 {
            padding: 8vw 4vw;
        }
        .bgw {
            background: white;
        }
       .mt4 {
            margin-top: 4vw;
        }

        .am-u-sm-6.clplr.amount-a {
            padding-left: 4vw;
        }

        .amount-a div {
            font-size: 3.73vw;
        }

        .amount-b .amount-b-1-add {
            padding: 0.933vw;
            text-align: -webkit-center;
        }

            .amount-b .amount-b-1-add img {
                width: 2.666vw;
            }

        .am-u-sm-6.clplr.amount-b {
            padding-right: 4vw;
        }

        .amount-b .amount-b-1-reduce {
            padding: 0.933vw;
            text-align: -webkit-center;
            margin-top: 0.2415vw;
        }

        .amount-b .amount-b-1-reduce img {
                width: 2.13333vw;
            }

        .amount-b .amount-b-1 {
            float: right;
        }

        .amount-b .amount-b-2 {
            float: right;
            font-size: 3.73vw;
            text-align: center;
            margin-top: -0.4831vw;
        }

        .amount-b .amount-b-3 {
            float: right;
        }
        .am-u-sm-6{
          width:50%
        }
      .jg-gonggao{ padding:2vw 0;
      }
     .mt4 {
            margin-top: 4vw;
        }

      .jg-gonggao1{
         margin:0 4vw; font-size:3.734vw; margin-top:4vw;
         }
      .jg-text-z{
        float:left; width:27vw; color:#181818;
        }
      .jg-text-y{
        float:left; width:65vw; color:#a2a2a2;

        .purchase-a {
            float: right;
            width: 30.667vw;
            text-align: center;
            padding: 4.3478vw 0;
            background: #02d4d7;
            color: white;
            font-weight: bolder;
        }

        .purchase-b {
            float: right;
            width: 29.335vw;
            text-align: center;
            padding: 4.3478vw 0;
        }

        .purchase-c {
            float: left;
            margin-left: 4vw;
            margin-top: 1.4492vw;
            margin-bottom: 2.4vw;
            width: 36vw;
            overflow: hidden;
        }

        .purchase-1 .purchase-1 {
            font-size: 4.26vw;
        }

        .purchase-2 .purchase-2 {
            font-size: 4.26vw;
        }

        .purchase-c .purchase-c-1 {
            font-size: 4.53vw;
            color: #f2495e;
            font-weight: bolder;
            width: 36vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .purchase-c .purchase-c-2 .purchase-c-2-left {
            float: left;
            font-size: 2.4vw;
            color: #333;
        }

        .purchase-c .purchase-c-2 .purchase-c-2-right {
            float: left;
            font-size: 2.4vw;
            color: #333;
            font-weight: bolder;
        }

        .am-img-responsive{
          display: block;
          width:100%;
          height: 50%;
        }

           .evaluate-a .left {
            float: left;
            font-size: 3.73vw;
            margin-top: 1.2vw;
            margin-right: 2.93vw;
            width: 12%;
        }

        .evaluate-a .right {
            float: left;
            font-size: 3.73vw;
        }

}

</style>
